<script setup>
import { ref, onMounted, watch } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
const airStore = useAirStore()
const { AirFlight, FocusAirId, operationData } = storeToRefs(airStore)

const currentId = ref('')
const tableList = ref([])
const focusAir = (item) => {
  if (currentId.value == item.snId) {
    currentId.value = ''
    __g.customObject.focus('air-' + item.snId, 2000)
    FocusAirId.value = item.snId
    __g.marker.showByGroupId('wrjMarker')
  } else {
    currentId.value = item.snId
    // __g.customObject.focus('air-' + item.snId, -1)
    __g.customObject.focus('air-' + item.snId, 100, 0, [-30, 4, 0], 1)
    FocusAirId.value = item.snId
    __g.marker.hideByGroupId('wrjMarker')
  }
}

const airList = ref([
  {
    snId: '保惠物流园-云海公园',
    name: '大疆T50',
    registerBody: '保惠物流'
  },
  {
    snId: '壹海城-恩上公园',
    name: '云卓980S',
    registerBody: '云卓智能'
  },
  {
    snId: '壹海城-大梅沙公园',
    name: '云卓980S',
    registerBody: '云卓智能'
  }
])
const newAirList = ref([
  {
    flightTime: 9173,
    flyType: '1',
    gs: 23.56,
    height: 512,
    latitude: '22.59541',
    longitude: '114.2603',
    snId: '云卓980S',
    timeStamp: 1734009489459,
    uavModel: 'M300',
    uavType: '1'
  },
  {
    flightTime: 9171,
    flyType: '3',
    gs: 19.03,
    height: 542,
    latitude: '22.59625',
    longitude: '114.26134',
    snId: '大疆T50',
    timeStamp: 1734009489459,
    uavModel: 'M300',
    uavType: '1'
  }
])
// watch(
//   AirFlight,
//   (newVal) => {
//     airList.value = []
//     for (let i in newVal) {
//       if (newVal[i].flyType == 3) {
//         airList.value.push(newVal[i])
//       }
//     }
//     console.log('airList', airList.value)
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )

const setData = (val) => {
  tableList.value = val.flightPlanList
}

watch(operationData, (newVal) => {
  setData(newVal)
})
</script>
<template>
  <div class="card">
    <div class="table">
      <ul class="thead">
        <li>飞行起终点</li>
        <li>飞行器型号</li>
        <li>运营单位</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="airList"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :limitScrollNum="4"
        >
          <li
            v-for="(item, index) in airList"
            :key="index"
            :class="{ active: currentId == item.snId }"
            @click="focusAir(item)"
          >
            <p>
              <el-tooltip class="box-item" effect="dark" :content="item.snId" placement="top">
                <span>{{ item.snId }}</span>
              </el-tooltip>
            </p>
            <p>
              <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top">
                <span class="type">{{ item.name }}</span>
              </el-tooltip>
            </p>
            <p>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="item.registerBody"
                placement="top"
              >
                <span>{{ item.registerBody }}</span>
              </el-tooltip>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .table {
    width: 100%;
    padding: 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 175px;
      overflow: hidden;

      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;
        cursor: pointer;

        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        &.active {
          background-color: #026072;
        }

        P {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            width: 100px;
            overflow: hidden;
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
          }

          .type {
            width: 67px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
          }
        }
      }
    }
  }
}
</style>
